<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">重置支付密码</text>
			<template slot="right">
			</template>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="color-grey">
				<text>发送验证短信到以下手机号</text>
			</view>
			<view class="phone">
				<text>{{hidePhone(user.phone)}}</text>
			</view>
			<form ref="form">
				<view class="input_box code flex-r">
					<input class="input" name="smscode" type="number" @input="checkSmsCode" placeholder="请输入验证码" placeholder-style="color:#B3B3B3;font-size:30rpx" v-model="smscode" maxlength="6"/>
					<text class="send_code" :class="{'active':canSend,'wait':isSend}" @tap="sendSMS">{{sendText}}</text>
				</view>
				<view class="error-message color-red" v-if="error">
					<text>验证码错误，请重新输入验证码</text>
				</view>
				<view class="submit-box">
					<button type="default" class="nextbtn" :class="{'active': canSubmit}" @tap="next">下一步</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canSend: true,
				isSend: false,
				isSubmit: false,
				canSubmit: false,
				
				smscode: '',
				sendText: '获取验证码',
				
				timer: null,
				error: false,
			}
		},
		computed:{
			user() {
				return this.$store.state.user
			}
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			//手机号隐藏部分信息
			hidePhone(phone){
				return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
			},
			//发送短信验证码
			sendSMS() {
				if(this.isSend || !this.canSend){
					return
				}
				this.isSend = true
				this.sendText = '发送中...'
				let smsData = {
					phone: this.user.phone,
					term: 'user',
					type: '2' //0 .登录模板、1.注册模板、2.忘记密码模板
				}
				this.$http.get({
					url: '/api/sms',
					data: {
						...smsData
					}
				}).then((data)=>{
					console.log(data);
					if(data.success){
						this.canSend = false
						this.isSend = true
						let time = 60
						let _this = this
						_this.sendText = '重新获取 ' + time + 'S'
						this.timer = setInterval(()=>{
							console.log(1);
							time = time - 1
							if(time === 0){
								clearInterval(_this.timer)
								_this.canSend = true
								_this.isSend = false
								_this.timer = null
								_this.sendText = '获取验证码'
							}else{
								_this.sendText = '重新获取 ' + time + 'S'
							}
						}, 1000)
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
					}else{
						this.canSend = true
						this.isSend = false
						this.sendText = '获取验证码'
						uni.showToast({
							title: data.message,
							icon: 'none',
						})
					}
				}).catch(()=>{
					this.canSend = true
					this.isSend = false
					this.sendText = '获取验证码'
					uni.showToast({
						title: '验证码发送失败，请稍后重试',
						icon: 'none'
					})
				})
			},
			//验证码本地校验
			checkSmsCode(e) {
				if (e.detail.value.length == 6) {
					console.log(e.detail.value);
					this.$http.post({
						url: '/api/appUser/forgetPayPwd',
						data: {
							smscode: e.detail.value,
							userId: this.user.userId,
						},
					}).then(data => {
						console.log(data);
						if(data.success){
							this.error = false
							this.canSubmit = true
						}else{
							this.error = true
							this.canSubmit = false
						}
					}).catch((err) => {
						this.error = false
						this.canSubmit = false
					})
				}else{
					this.error = false
					this.canSubmit = false
				}
			},
			//下一步
			next(){
				if(this.canSubmit){
					this.$Router.replace({name: 'newpassword', params: {smscode: this.smscode}})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0;
		.body {
			margin: 60rpx 0 0;
			align-items: center;
			width: 100%;
			.color-grey{
				font-size: 26rpx;
				line-height: 26rpx;
			}
			.phone{
				font-size: 36rpx;
				font-family: Arial;
				line-height: 36rpx;
				margin: 20rpx 0 0;
			}
			.input_box{
				width: 710rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				.input{
					border: none;
					width: 100%;
					height: 96rpx;
				}
				&.code{
					margin-top: 60rpx;
					align-items: center;
					.input{
						flex: 2;
					}
					.send_code{
						color: #4C88FF;
						font-size: 30rpx;
					}
				}
			}
			.error-message{
				margin: 20rpx 20rpx 0;
				font-size: 24rpx;
			}
			.submit-box{
				margin: 40rpx 20rpx 0;
			}
		}
	}
</style>
